<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能运动分析系统 - API文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
        }
        
        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 40px;
            font-size: 1.2em;
        }
        
        .docs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .doc-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            border-left: 5px solid #667eea;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .doc-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .doc-card h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.3em;
        }
        
        .doc-card p {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .doc-link {
            display: inline-block;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 25px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.3s;
        }
        
        .doc-link:hover {
            transform: scale(1.05);
        }
        
        .api-info {
            background: #e3f2fd;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }
        
        .api-info h4 {
            color: #1565c0;
            margin-bottom: 15px;
        }
        
        .api-info ul {
            list-style: none;
            padding-left: 0;
        }
        
        .api-info li {
            margin: 8px 0;
            padding-left: 20px;
            position: relative;
        }
        
        .api-info li:before {
            content: "🔗";
            position: absolute;
            left: 0;
        }
        
        .endpoint {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border-left: 4px solid #4CAF50;
        }
        
        .method {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 12px;
            margin-right: 10px;
        }
        
        .method.post { background: #4CAF50; color: white; }
        .method.get { background: #2196F3; color: white; }
        .method.put { background: #FF9800; color: white; }
        .method.delete { background: #f44336; color: white; }
        
        .auth-info {
            background: #fff3e0;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            border-left: 4px solid #FF9800;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 智能运动分析系统</h1>
        <div class="subtitle">API接口文档中心</div>
        
        <div class="api-info">
            <h4>📋 系统信息</h4>
            <ul>
                <li><strong>服务地址：</strong> http://localhost:8085</li>
                <li><strong>API版本：</strong> v1.0.0</li>
                <li><strong>认证方式：</strong> JWT Bearer Token</li>
                <li><strong>数据格式：</strong> JSON</li>
            </ul>
        </div>
        
        <div class="docs-grid">
            <div class="doc-card">
                <h3>📖 Swagger UI 交互式文档</h3>
                <p>
                    完整的API交互式文档，支持在线测试接口。
                    包含所有接口的详细说明、参数定义和响应示例。
                </p>
                <a href="http://localhost:8085/swagger-ui.html" target="_blank" class="doc-link">
                    🚀 打开 Swagger UI
                </a>
            </div>
            
            <div class="doc-card">
                <h3>📄 OpenAPI JSON 文档</h3>
                <p>
                    标准的OpenAPI 3.0格式文档，可用于代码生成、
                    导入Postman或其他API工具。
                </p>
                <a href="http://localhost:8085/api-docs" target="_blank" class="doc-link">
                    📥 下载 JSON 文档
                </a>
            </div>
            
            <div class="doc-card">
                <h3>🎥 智能视频播放器</h3>
                <p>
                    测试视频上传、分析和智能播放功能的前端界面。
                    包含完整的用户交互流程。
                </p>
                <a href="smart-video-player.html" target="_blank" class="doc-link">
                    🎬 打开播放器
                </a>
            </div>
            
            <div class="doc-card">
                <h3>🤖 AI运动指导</h3>
                <p>
                    基于分析结果的智能AI教练对话系统。
                    提供个性化运动技术指导和问答服务。
                </p>
                <a href="ai-guidance.html" target="_blank" class="doc-link">
                    🚀 AI教练对话
                </a>
            </div>
        </div>
        
        <div class="api-info">
            <h4>🎯 核心API接口</h4>
            
            <div class="endpoint">
                <span class="method post">POST</span>
                <strong>/api/video/upload</strong>
                <p>上传视频文件进行最高精度分析</p>
                <small>参数：video (文件), sportType (运动类型)</small>
            </div>
            
            <div class="endpoint">
                <span class="method get">GET</span>
                <strong>/api/video/result/{resultId}</strong>
                <p>获取详细分析结果</p>
                <small>参数：resultId (路径参数), sportType (查询参数)</small>
            </div>
            
            <div class="endpoint">
                <span class="method get">GET</span>
                <strong>/api/video/play/{resultId}</strong>
                <p>播放分析结果视频</p>
                <small>返回：视频文件流</small>
            </div>
            
            <div class="endpoint">
                <span class="method post">POST</span>
                <strong>/uaa/auth/login</strong>
                <p>用户登录获取JWT Token</p>
                <small>参数：username, password</small>
            </div>
            
            <div class="endpoint">
                <span class="method post">POST</span>
                <strong>/api/ai-guidance/conversation</strong>
                <p>创建AI指导会话</p>
                <small>参数：resultId (分析结果ID), sportType (运动类型)</small>
            </div>
            
            <div class="endpoint">
                <span class="method post">POST</span>
                <strong>/api/ai-guidance/ask</strong>
                <p>向AI教练提问</p>
                <small>请求体：{conversationId, question, sportType, resultId}</small>
            </div>
            
            <div class="endpoint">
                <span class="method get">GET</span>
                <strong>/api/ai-guidance/suggestions</strong>
                <p>获取推荐问题列表</p>
                <small>参数：resultId, sportType</small>
            </div>
            
            <div class="endpoint">
                <span class="method post">POST</span>
                <strong>/api/ai-guidance/quick-ask</strong>
                <p>快速提问（无需创建会话）</p>
                <small>参数：resultId, sportType, question, relatedTimestamp</small>
            </div>
        </div>
        
        <div class="auth-info">
            <h4>🔐 认证说明</h4>
            <p>
                大部分API接口需要JWT认证。请先调用登录接口获取Token，
                然后在请求头中添加：<code>Authorization: Bearer {token}</code>
            </p>
            <p>
                <strong>快速测试：</strong> 可以在Swagger UI中点击右上角的"Authorize"按钮，
                输入Token后即可测试所有需要认证的接口。
            </p>
        </div>
        
        <div style="text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;">
            <p style="color: #666;">
                💡 建议先访问 <strong>Swagger UI</strong> 查看完整的接口文档和在线测试功能
            </p>
        </div>
    </div>
    
    <script>
        // 检查服务是否运行
        function checkService() {
            fetch('http://localhost:8085/actuator/health')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'UP') {
                        console.log('✅ 服务运行正常');
                    }
                })
                .catch(error => {
                    console.warn('⚠️ 无法连接到服务，请确保应用已启动在8085端口');
                });
        }
        
        // 页面加载后检查服务状态
        document.addEventListener('DOMContentLoaded', checkService);
    </script>
</body>
</html> 